<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition">
            <el-tab-pane label="菜品管理" name="first">
                <div style="margin-top: 40px"></div>
                <el-row style="margin:20px 40px">
                    <el-col :span="1">
                    <el-button  type="primary" @click="insertFoodView = true" icon="el-icon-plus">添加菜品</el-button>
                    <el-dialog
                            title="新增菜品"
                            :visible.sync="insertFoodView"
                            width="50%"
                            @close="closedDig"

                            >
                        <el-form :model="foodFrom" :rules="foodRules" ref="foodFrom">
                            <el-row>
                                <el-col :span="14">
                                    <el-form-item label="菜名" prop="name">
                                        <el-input style="width: 75%" v-model="foodFrom.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="分组" prop="gory">
                                        <el-select clearable v-model="foodFrom.gory" placeholder="选择分组">
                                            <el-option
                                                    v-for="item in goryList"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                <el-form-item label="售价" prop="price">
                                    <el-input style="width: 67%" v-model="foodFrom.price"></el-input>
                                </el-form-item>
                                </el-col>
                                <el-col :span="10" :offset="4">
                                    <el-form-item label="成本价" prop="cost">
                                        <el-input style="width: 70%" v-model="foodFrom.cost"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="库存量" prop="inventory">
                                        <el-input-number style="width: 70%" v-model="foodFrom.inventory"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col>
                                    <el-form-item label="菜品图片" prop="file">
                                        <el-upload
                                                class="avatar-uploader"
                                                action=""
                                                :http-request="uploadFile"
                                                :show-file-list="false"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="filePath" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" v-model="foodFrom.desc"></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
            <el-button @click="insertFoodView = false">取 消</el-button>
            <el-button type="primary" @click="insertFood('foodFrom')">确 定</el-button>
          </span>
                    </el-dialog>
        <!--            修改-->
                    <el-dialog
                            title="修改菜品"
                            :visible.sync="updateFoodView"
                            width="50%"
                            @close="closedDig"
                    >
                        <el-form :model="foodChange" :rules="foodRules" ref="foodChange">
                            <el-row>
                                <el-col :span="14">
                                    <el-form-item label="菜名" prop="name">
                                        <el-input style="width: 75%" v-model="foodChange.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="分组" prop="gory">
                                        <el-select clearable v-model="foodChange.gory" placeholder="选择分组">
                                            <el-option
                                                    v-for="item in goryList"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="售价" prop="price">
                                        <el-input style="width: 67%" v-model="foodChange.price"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10" :offset="4">
                                    <el-form-item label="成本价" prop="cost">
                                        <el-input style="width: 70%" v-model="foodChange.cost"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="库存量" prop="inventory">
                                        <el-input-number style="width: 70%" v-model="foodChange.inventory"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col>
                                    <el-form-item label="菜品图片" prop="file">
                                        <el-upload
                                                class="avatar-uploader"
                                                action=""
                                                :http-request="updateuploadFile"
                                                :show-file-list="false"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="updateFilePath" :src="url+updateFilePath" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" v-model="foodChange.desc"></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
            <el-button @click="updateFoodView = false">取 消</el-button>
            <el-button type="primary" @click="updateFood('foodChange')">确 定</el-button>
          </span>
                    </el-dialog>
        <!--            -->
                    </el-col>
<!--                    <el-col  :span="3">-->
<!--                        <el-select clearable v-model="value" placeholder="所有分组">-->
<!--                            <el-option-->
<!--                                    v-for="item in goryList"-->
<!--                                    :key="item.id"-->
<!--                                    :label="item.name"-->
<!--                                    :value="item.id">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-col>-->
                </el-row>
                <div>
                    <el-table :data="foodList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.foodDescribe.includes(search))">
                        <el-table-column type="selection" prop="id" label="编号"></el-table-column>
                        <el-table-column prop="name" label="菜名"></el-table-column>
                        <el-table-column prop="foodDescribe" label="描述"></el-table-column>
                        <el-table-column prop="price" label="售价"></el-table-column>
                        <el-table-column prop="costPrice" label="成本"></el-table-column>
                        <el-table-column prop="foodcategory.name" label="分组"></el-table-column>
                        <el-table-column sortable prop="inventoryCount" label="库存"></el-table-column>
                        <el-table-column prop="picPath" label="图片">
                            <template slot-scope="scope">
                                <el-image
                                style="width: 100px; height: 100px"
                                :src="url+scope.row.picPath"
                                ></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column sortable prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column
                                align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                        v-model="search"
                                        size="mini"
                                        placeholder="输入关键字搜索"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                        @click="updateFoodView = true,foodFromMsg(scope.row)"
                                        type="primary" icon="el-icon-edit" circle class="pgex"></el-button>

                                <el-popconfirm
                                        placement="top"
                                        width="160"
                                        v-model="visible"
                                        title="确定删除这条数据吗？" @onConfirm="deleteFood(scope.$index, scope.row)">
                                    <el-button circle slot="reference"  type="danger" icon="el-icon-delete"></el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: center">
                        <el-button @click="first">首页</el-button>
                        <el-button @click="up">上一页</el-button>
                        <el-button @click="down">下一页</el-button>
                        <el-button @click="last">尾页</el-button>
                    </div>
                </div>

            </el-tab-pane>
            <el-tab-pane label="菜品分析" name="second">
                <div style="margin-top: 60px"></div>
                <el-table :data="analysisList.slice((currentPage-1)*pageSize,currentPage*pageSize) .filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.foodDescribe.includes(search)) ">
                    <el-table-column type="selection" prop="id" label="编号"></el-table-column>
                    <el-table-column prop="name" label="菜品名称"></el-table-column>
                    <el-table-column prop="foodDescribe" label="描述"></el-table-column>
                    <el-table-column prop="foodcategory.name" label="分组"></el-table-column>
                    <el-table-column sortable prop="price" label="累计销售额"></el-table-column>
                    <el-table-column sortable prop="costPrice" label="累计成本"></el-table-column>
                    <el-table-column sortable prop="orderCount" label="累计销量"></el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    @click="updateFoodView = true,foodAnalyMsg(scope.row)"
                                    type="primary" icon="el-icon-edit" circle class="pgex"></el-button>
                            <el-popconfirm
                                    placement="top"
                                    width="160"
                                    v-model="visible"
                                    title="确定删除这条数据吗？" @onConfirm="deleteFood(scope.$index, scope.row)">
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="pageSize"
                        :pager-count="5"
                        :current-page="currentPage"
                        :page-sizes="[3, 5, 8, 10]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="analysisList.length">
                </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="菜品细分" name="third">
                <div style="margin-top: 20px"></div>
                <div>
                    <div ref="foodEcharts" style="width: 1300px;height: 500px"></div>
                    <div ref="goryEcharts" style="width: 1300px;height: 500px"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="分组管理" name="fourth">
                <div style="margin-top: 40px"></div>
                <el-row :gutter="10" style="margin: 20px auto">
                    <el-col :span="3" :offset="1">
                        <el-input

                                placeholder="添加分组"
                                v-model="goryAdd"
                                clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="1">
                        <el-button @click="goryInsert()" icon="el-icon-plus" type="primary">添加</el-button>
                    </el-col>
                </el-row>
                <el-table :data="goryList.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1).filter(data => !searchgory || data.name.toLowerCase().includes(searchgory.toLowerCase()))">
                    <el-table-column type="selection" prop="id" label="编号"></el-table-column>
                    <el-table-column label="分组名称" prop="name"></el-table-column>
                    <el-table-column label="商品数量" prop="foodCount"></el-table-column>
                    <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="searchgory"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    @click=" goryVisible = true , goryChange(scope,scope.row)"
                                    type="primary" icon="el-icon-edit" circle class="pgex"></el-button>
                            <el-popconfirm
                                    placement="top"
                                    width="160"
                                    v-model="visible"
                                    title="确定删除这条数据吗？" @onConfirm="deletegory(scope.$index, scope.row)">
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center">
                                <el-pagination
                        @current-change="handleCurrentChange1"
                        @size-change="handleSizeChange1"
                        :page-size="pageSize1"
                        :pager-count="5"
                        :current-page="currentPage1"
                        :page-sizes="[3, 5, 8, 10]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="goryList.length">
                </el-pagination>
                </div>
            </el-tab-pane>
            <el-dialog
                    title="提示"
                    :visible.sync="goryVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-input v-model="gory.name"></el-input>
                <el-input v-model="gory.count" v-if="true"></el-input>
                <span slot="footer" class="dialog-footer">
    <el-button @click="goryVisible = false">取 消</el-button>
    <el-button type="primary" @click="goryVisible = false,updateGory()">确 定</el-button>
  </span>
            </el-dialog>
        </el-tabs>
    </div>
</template>

<script>
    var echarts = require('echarts/lib/echarts')
    // 引入线状图
    require('echarts/lib/chart/line')
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    export default {
        name: "FoodManger",
        data(){
            return{
                currentPage:1,
                pageSize:5,
                currentPage1:1,
                pageSize1:5,
                tabPosition:'left',
                gory:{
                    count:'',
                    name:'',
                    id:''
                },
                goryVisible:false,
                activeName: 'first',
                goryAdd:'',
                foodList:[],
                analysisList:[],
                goryList:[],
                search: null,
                searchgory:null,
                value:'',
                visible:false,
                insertFoodView: false,
                updateFoodView: false,
                foodFrom:{
                    name:'',
                    gory:'',
                    price:'',
                    cost:'',
                    inventory:'',
                    file:'',
                    desc:''
                },
                foodRules:{
                    name:[
                        {required: true, message: '请输入菜品名字', trigger: 'blur'}
                    ],
                    gory:[
                        {required: true, message: '请选择分组', trigger: 'blur'}
                    ],
                    price:[
                        {required: true, message: '请输入售价', trigger: 'blur'}
                    ],
                    cost:[
                        {required: true, message: '请输入成本', trigger: 'blur'}
                    ],
                    inventory:[
                        {required: true, message: '请输入库存量', trigger: 'blur'}
                    ],
                    file:[
                        {required: true, message: '请选择图片', trigger: 'blur'}
                    ],
                    desc:[
                        {required: true, message: '请输入菜品描述', trigger: 'blur'}
                    ],
                },
                foodChange:{
                    id:'',
                    name:'',
                    gory:'',
                    price:'',
                    cost:'',
                    inventory:'',
                    file:'',
                    desc:''
                },
                url:'http://localhost:8080',
                imageUrl: '',
                filePath:'',
                updateFilePath:'',
                foodOption:{
                    color: ['#c90a0a'],
                    title:{
                        text:'菜品销量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['烧卖','干蒸','糯米鸡','肠粉'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [90,89,77,20]
                        }
                    ]
                },
                GoryOption:{
                    color: ['#c90a0a'],
                    title:{
                        text:'分组销量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['烧卖','干蒸','糯米鸡','肠粉'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [90,89,77,20]
                        }
                    ]
                }
            }
        },
        methods:{
            handleSizeChange(val){
                this.pageSize = val;
            },
            handleCurrentChange(val){
                this.currentPage = val;
            },
            handleSizeChange1(val){
                this.pageSize1 = val;
            },
            handleCurrentChange1(val){
                this.currentPage1 = val;
            },
            first(){this.$axios.post('food/first').then(req=>{this.foodList.length=0;req.data.forEach(food=>this.foodList.push(food))})},
            up(){this.$axios.post('food/up').then(req=>{this.foodList.length=0;req.data.forEach(food=>this.foodList.push(food))})},
            down(){this.$axios.post('food/down').then(req=>{this.foodList.length=0;req.data.forEach(food=>this.foodList.push(food))})},
            last(){this.$axios.post('food/last').then(req=>{this.foodList.length=0;req.data.forEach(food=>this.foodList.push(food))})},
            EChartsData(){
              this.$axios.get('food/ECharts').then(req=>{
                  this.foodOption.xAxis[0].data = req.data.fname;
                  this.foodOption.series[0].data = req.data.forder;
                  this.GoryOption.xAxis[0].data = req.data.gname;
                  this.GoryOption.series[0].data = req.data.gorder;
              })
            },
            updateGory(){
                var params = new URLSearchParams;
                params.append('name',this.gory.name);
                params.append('id',this.gory.id);
                params.append('count',this.gory.count);
                this.$axios.post('gory/update',params).then(req=>{
                    this.goryList.length=0;
                    req.data.forEach(gory=>this.goryList.push(gory));
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            goryChange(scope,row){
                this.gory.name = row.name;
                this.gory.count = row.foodCount;
                this.gory.id = row.id;
            },
            deletegory(index,row){
                var params = new URLSearchParams;
                params.append('id',row.id)
                this.$axios.post('gory/delete',params).then(req=>{
                    this.goryList.length=0;
                    req.data.forEach(gory=>this.goryList.push(gory))
                    if (req.data.length>=0){
                        this.$message({
                            type:"success",
                            message:"删除成功"
                        })
                    }else {
                        this.$message.error("删除失败")
                    }
                })
            },
            analysis:function(){
                this.$axios.post('food/analysis').then(req=>{
                    req.data.forEach(ana=>this.analysisList.push(ana));
                });
            },
            foodAnalyMsg(row){
                var params = new URLSearchParams;
                params.append('id',row.id);
                this.$axios.post('food/one',params).then(req=>{
                    this.foodChange.id=req.data.id;
                    this.foodChange.name=req.data.name;
                    this.foodChange.gory=req.data.category;
                    this.foodChange.price=req.data.price;
                    this.foodChange.cost=req.data.costPrice;
                    this.foodChange.inventory=req.data.inventoryCount;
                    this.updateFilePath=req.data.picPath;
                    this.foodChange.desc=req.data.foodDescribe;
                    this.foodChange.file = req.data.picPath;
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
                if (tab.name === 'first'){
                    this.first();
                    this.disPlayGory();
                }else if (tab.name === 'second'){
                    this.analysis();
                }else if (tab.name === 'third'){
                    this.EChartsData();
                }else if (tab.name === 'fourth'){
                    this.disPlayGory();
                }
            },
            goryInsert:function(){
                if (this.goryAdd===''){
                    this.$message.error("不能为空");
                }else {
                    var params = new URLSearchParams;
                    params.append('name',this.goryAdd);
                    params.append('count','0');
                    this.$axios.post('gory/insert',params).then(req=>{
                        if (req.data.length>0){
                            this.goryList.length=0;
                            req.data.forEach(gory=>{this.goryList.push(gory)});
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.goryAdd='';
                        }else {
                            this.$message('添加失败')
                        }
                    })
                }
            },
            updateFood:function(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params = new URLSearchParams();
                        params.append('id',this.foodChange.id);
                        params.append('name',this.foodChange.name);
                        params.append('desc',this.foodChange.desc);
                        params.append('price',this.foodChange.price);
                        params.append('cost',this.foodChange.cost);
                        params.append('gory',this.foodChange.gory);
                        params.append('inventoryCount',this.foodChange.inventory);
                        params.append('pic',this.foodChange.file);
                        this.$axios.post('food/update',params).then(req=>{
                            this.foodList.length=0;
                            this.updateFoodView = false;
                            req.data.forEach(food=>{this.foodList.push(food)});
                            if (this.foodList.length===0){
                                this.$message.error('修改失败');
                            }else {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            }
                        })
                    } else {
                        this.$message.error("验证不通过");
                        return false;
                    }
                });
            },
            insertFood:function(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params = new URLSearchParams();
                        params.append('name',this.foodFrom.name);
                        params.append('desc',this.foodFrom.desc);
                        params.append('price',this.foodFrom.price);
                        params.append('cost',this.foodFrom.cost);
                        params.append('gory',this.foodFrom.gory);
                        params.append('inventoryCount',this.foodFrom.inventory);
                        params.append('pic',this.foodFrom.file);
                        this.$axios.post('food/insert',params).then(req=>{
                            this.foodList.length=0;
                            this.insertFoodView = false;
                            req.data.forEach(food=>{this.foodList.push(food)});
                            if (this.foodList.length===0){
                                this.$message.error('添加失败');
                            }else {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            }
                        })
                    } else {
                        this.$message.error("验证失败")
                        return false;
                    }
                });
            },
            disPlayFood:function () {
                this.$axios.post('/food/first').then(req=>{
                    req.data.forEach(food=>{this.foodList.push(food)})
                })
            },
            disPlayGory:function () {
                this.$axios.get('/gory/list').then(req=>{
                    req.data.forEach(gory=>{this.goryList.push(gory)})
                })
            },
            foodFromMsg:function(row){
                this.foodChange.id=row.id;
                this.foodChange.name=row.name;
                this.foodChange.price=row.price;
                this.foodChange.desc=row.foodDescribe;
                this.foodChange.inventory=row.inventoryCount;
                this.foodChange.gory=row.category;
                this.foodChange.cost=row.costPrice;
                this.updateFilePath=row.picPath;
                this.foodChange.file=row.picPath;
            },
            deleteFood:function (index,row) {
                var params = new URLSearchParams();
                params.append('id',row.id);
                this.foodList.length=0;
                this.$axios.post('/food/delete',params).then(req=>{
                    req.data.forEach(food=>{this.foodList.push(food)});
                });
                console.log(row);
                if (this.foodList !==0){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }else {this.$message.error('删除失败');}
            },
            uploadFile(param){
                var formData = new FormData();
                formData.append('file',param.file);
                this.$axios.post("/food/picLoad",formData).then(req=>{
                    this.filePath = req.data;
                    this.foodFrom.file = req.data;
                    this.imageUrl = this.url+this.filePath;
                })
            },
            updateuploadFile(param){
                var formData = new FormData();
                formData.append('file',param.file);
                this.$axios.post("/food/picLoad",formData).then(req=>{
                    this.updateFilePath = req.data;
                    this.foodChange.file = req.data;
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isGIF = file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M&&(isJPG || isPNG || isGIF);
            },
            closedDig:function () {
                this.filePath='';
                this.imageUrl='';
                this.updateFilePath='';

            },
            getEcharts(){
                let myChart = echarts.init(this.$refs.foodEcharts);
                myChart.setOption(this.foodOption,true);
            },
            getGoryEcharts(){
                let goryChart = echarts.init(this.$refs.goryEcharts);
                goryChart.setOption(this.GoryOption,true);
            }
        },
        computed:{

        },
        mounted:function() {
            this.getEcharts();
            this.getGoryEcharts();
            this.EChartsData();
            this.disPlayFood();
            this.disPlayGory();
            this.analysis();
        },
        watch: {
            foodOption:{
                handler(newVal,oldVal){
                    if (this.myChart) {
                        if (newVal) {
                            this.myChart.setOption(newVal);
                        } else {
                            this.myChart.setOption(oldVal);
                        }
                    } else {
                        this.getEcharts();
                    }
                },
                deep:true
            },
            GoryOption:{
                handler(newVal,oldVal){
                    if (this.goryChart) {
                        if (newVal) {
                            this.goryChart.setOption(newVal);
                        } else {
                            this.goryChart.setOption(oldVal);
                        }
                    } else {
                        this.getGoryEcharts();
                    }
                },
                deep:true
            }
        }
    }
</script>
<style scoped>

    @import "../style/diningTalbe.css";
</style>